<template>
  <div class="pxy20">

    <ElRow>
      <ElCol :span="2">
        <ElButton type="primary" @click="addArticle">新增文章</ElButton>
      </ElCol>
      <ElCol :span="6">
        <ElInput v-model="listQuery.title" placeholder="输入标题搜索" clearable @keyup.enter.native="searchArticle">
          <el-button slot="append" icon="el-icon-search" @click="searchArticle" />
        </ElInput>
      </ElCol>

      <ElCol :span="4" :offset="1">
        <el-select v-model="listQuery.type" placeholder="请选择文章类型" @change="getList">
          <el-option v-for="item,i in tagList" :key="i" :label="item" :value="item" />
        </el-select>
      </ElCol>
    </ElRow>

    <ElTable v-loading="loadShow" :data="list" border style="margin-top: 20px">
      <ElTableColumn label="序号" type="index" align="center" width="70" />
      <ElTableColumn label="标题" prop="title" align="center" />
      <ElTableColumn label="文章类别" prop="type" align="center" width="350" />
      <ElTableColumn label="创建时间" prop="articleCreateTime" align="center" width="350" />
      <ElTableColumn label="操作" width="350">
        <template slot-scope="{ row }">
          <div>
            <ElButton type="primary" @click="edit(row)">编辑</ElButton>
            <el-popconfirm title="确定删除这篇文章吗？" @confirm="del(row)">
              <el-button slot="reference" style="margin-left: 5px" type="danger" icon="el-icon-delete">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { ARTICLE_DEL, GET_ARTICLE_LIST, GET_ARTICLE_LIST_ALL } from '@/api/manage/article'
import Pagination from '@/components/Pagination'
export default {
  name: 'ManageArticle',
  components: { Pagination },
  data() {
    return {
      loadShow: false,
      list: [], // 当前页文章列表
      total: 0,
      listQuery: {
        page: 1,
        size: 10,
        title: '',
        type: ''
      },
      tagList: []
    }
  },
  created() {
    this.getList()
    this.getAll()
  },
  methods: {
    getList() {
      this.loadShow = true
      GET_ARTICLE_LIST(this.listQuery).then((res) => {
        // total为文章总数，rows为当前页的文章数据
        const { total, rows } = res.data
        this.list = rows
        this.total = total
        this.loadShow = false
      })
    },
    addArticle() {
      // 跳转新增文章页面
      this.$router.push({ name: 'abroadArticleEdit' })
    },
    edit(row) {
      // 跳转编辑文章页面
      this.$router.push({ name: 'abroadArticleEdit', params: row })
    },
    del(row) {
      const ids = row.id
      ARTICLE_DEL({ ids }).then((res) => {
        const i = res['result'] === 0
        this.$message({
          message: i ? '删除成功！' : '删除失败!' + res.msg,
          type: i ? 'success' : 'error'
        })
        i ? this.getList() : ''
      })
    },
    searchArticle() {
      this.listQuery.type = ''
      this.getList()
    },
    getAll() {
      GET_ARTICLE_LIST_ALL().then(res => {
        // 获取文章类型
        const e = res.data.map(e => e.type)
        const tagList = Array.from(new Set(e))
        // 一篇文章可能属于多个类型，以"/"区分
        // 清除"/"
        const arr2 = tagList.map((a) => {
          return a.includes('/') ? a.split('/') : a
        })
        this.tagList = Array.from(new Set(arr2.flat()))
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
